/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, Image, DeviceEventEmitter,
} from "react-native";

import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import { isEmpty } from "../utils/utils";
import Button from "../widget/common/NCButton";
import { toastShort } from "../utils/ToastUtils";

let userInfo;

export default class Setting extends Component {
  constructor(props) {
    super(props);
    userInfo = NavigatorUtil.getPageParam(props, "userInfo");
    this.state = {
      mobile: userInfo.mobile,
    };
    this.bindMobileListener = DeviceEventEmitter.addListener("BINDMOBILESUCCESS", mobile => {
      this.setState({
        mobile,
      });
    });
  }

  logout = () => {
    DeviceEventEmitter.emit("LOGOUT", null);
    NavigatorUtil.logOut();
    NavigatorUtil.goBack();
    toastShort("已退出登录");
  };

  render() {
    const { mobile } = this.state;
    return (
      <BasePage style={styles.container}>
        <View>
          <TouchableOpacity onPress={() => NavigatorUtil.goEditUserInfo(userInfo)}>
            <View style={styles.itemRow}>
              <Text style={styles.textKey}>个人资料</Text>
              <Image source={require("../img/ic_arrow_right.png")} style={styles.arrow} />
            </View>
          </TouchableOpacity>
          <View style={styles.devider} />
          <TouchableOpacity onPress={() => NavigatorUtil.BindMobileGetCode(isEmpty(mobile) ? 0 : 1)}>
            <View style={styles.itemRow}>
              <Text style={styles.textKey}>绑定手机号</Text>
              {isEmpty(mobile) ? (
                <Image source={require("../img/ic_arrow_right.png")} style={styles.arrow} />
              ) : (
                <Text style={styles.textKey}>{mobile}</Text>
              )}
            </View>
          </TouchableOpacity>
          <View style={styles.devider} />
          <TouchableOpacity onPress={() => NavigatorUtil.goAddressList()}>
            <View style={styles.itemRow}>
              <Text style={styles.textKey}>地址管理</Text>
              <Image source={require("../img/ic_arrow_right.png")} style={styles.arrow} />
            </View>
          </TouchableOpacity>
          <View style={styles.devider} />
        </View>
        <Button onPress={this.logout} buttonStyle={styles.btnContainer} textStyle={styles.btnText} title="退出登录" />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
    justifyContent: "space-between",
  },
  itemRow: {
    height: scale * 48,
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16 * scale,
  },
  devider: {
    height: StyleSheet.hairlineWidth,
    width: ScreenWidth - scale * 32,
    backgroundColor: Color.devider,
    marginLeft: scale * 16,
  },
  textKey: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
  },
  arrow: {
    width: scale * 20,
    height: scale * 20,
  },
  btnContainer: {
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.white,
    borderColor: Color.tab_yellow,
    borderWidth: StyleSheet.hairlineWidth,
    marginBottom: scale * 48,
    marginLeft: scale * 32,
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.tab_yellow,
  },
});
